<template>
  <div class>
    <div>
      <el-row>
        <el-table :data="attrGroupTableData" height="350">
          <el-table-column label="属性分组">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="attrGroupId" label="分组ID"></el-table-column>
            <el-table-column prop="attrGroupName" label="分组名"></el-table-column>
            <el-table-column prop="icon" label="组图标">
              <template slot-scope="scope">
                <el-image style="width: 64px; height: 24px" :src="scope.row.icon" fit="contain"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="descript" label="描述"></el-table-column>
            <el-table-column header-align="center" align="center" width="250" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="attrGroupRelationHandle(scope.row.attrGroupId)">维护关联</el-button>
                <el-button type="text" size="small" @click="attrGroupAddHandle(scope.row.attrGroupId)">修改</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="attrGroupDeleteHandle(scope.row.attrGroupId,scope.row.attrGroupName)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="block">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
      </el-row>
    </div>
    <attr-group-add-update v-if="attrGroupDialogShow" ref="attrGroupAddUpdate" @saveSuccess="saveSuccess"></attr-group-add-update>
    <attr-group-relation v-if="attrGroupRelationDialogShow" ref="attrGroupRelation"></attr-group-relation>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import AttrGroupAddUpdate from "./attr-group-add-update";
import AttrGroupRelation from "./attr-group-relation";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { AttrGroupAddUpdate,AttrGroupRelation },
  props: ["catId"],
  data() {
    //这里存放数据
    return {
      attrGroupTableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      attrGroupDialogShow: false,
      attrGroupRelationDialogShow: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    catId(val) {
      this.initAttrGroup(val);
    }
  },
  //方法集合
  methods: {
    saveSuccess(){
      this.initAttrGroup(this.catId);
    },
    // 初始化屬性分組
    initAttrGroup(catId) {
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornApiUrl("/pms/attrgroup/" + catId),
          method: "get",
          params: this.$http.adornParams({
            limit: this.pageSize,
            page: this.pageIndex
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.attrGroupTableData = data.data.list;
            this.totalCount = data.data.totalCount;
            this.pageIndex = data.data.currPage;
          }
        });
      });
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.initAttrGroup(this.catId);
    },
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.initAttrGroup(this.catId);
    },
    attrGroupDeleteHandle(val, name) {
      this.$confirm(
        "确认删除分组【" +
          name +
          "】,这个组关联的属性将自动归为【其他】组，是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornApiUrl("/pms/attrgroup/delete"),
            method: "post",
            data: this.$http.adornData([val], false, "json")
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({ type: "success", message: "删除成功..." });
              this.initAttrGroup(this.catId);
            } else {
            }
          });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消" });
        });
    },
    attrGroupAddHandle(id) {
      //按照属性分组id查出属性分组信息，进行回显并修改
      this.$http({
        url: this.$http.adornApiUrl("/pms/attrgroup/info/" + id),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.attrGroupDialogShow = true;
          this.$nextTick(() => {
            this.$refs.attrGroupAddUpdate.showDetails(data.data);
          });
        } else {
        }
      });
    },
    attrGroupRelationHandle(id){
        this.attrGroupRelationDialogShow = true;
        this.$nextTick(()=>{
          this.$refs.attrGroupRelation.init(id);
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>